<template>
	<div class="decorate-community"
    :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <section class="community-box"> 
      <ul>
        <a v-for="(item,index) in tplItemData.dataset" :key="index" href="javascript:;" @click="openLink(item.link)" class="bdbox">
          <img :src="item.pic" alt="">
        </a>
      </ul>
    </section>
    
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      openLink(link){
        openPage(link)
      }
    }
  })
</script>

<style lang="scss">
.community-box{
  overflow: hidden;
  ul{
    a{
      display: block;
      float: left;
      width: 100%;
      margin-right: 20px;
      overflow-x: hidden;
      img {
        width: 100%;
        height: auto;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .fulltext img,
  .wx_compose img, 
  .wx_compose table {
    max-width: 100%!important;
    height: auto;
  }
}
</style>
